/* components */
import SettingGPTViewCheckbox from '@src/modules/setting/gpt/components/checkbox';
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import "@src/modules/setting/gpt/components/service-checkbox.scss";
/* types */
import { SettingGPTServiceItem } from '@gpt/types';
/* util */
import { isFalsy } from "@src/util/type";
import { getLocalesOssUrl } from '@src/util/assets'

enum SettingGPTServiceCheckboxEventEnum {
  Change = 'change',
  Click = 'click'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTServiceCheckbox,
  emits: [
    SettingGPTServiceCheckboxEventEnum.Change,
    SettingGPTServiceCheckboxEventEnum.Click
  ],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object as PropType<SettingGPTServiceItem>,
      default: () => ({})
    },
    onChange: {
      type: Function
    },
    onClick: {
      type: Function
    }
  },
  data() {
    return {
      checked: false
    }
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTServiceCheckbox]: true
      }
    },
    iconImage(): string {
      const fileName = 'xiao_bao_' + this.value.type + '.png'
      return getLocalesOssUrl(fileName)
    }
  },
  methods: {
    onChangeHandler() {
      
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        <SettingGPTViewCheckbox
          disabled={this.disabled || this.value.disabled}
          label={this.value.type}
          onChange={this.onChangeHandler}
        >
          <div class="setting-gpt-service-checkbox-content">
            <div class="setting-gpt-service-checkbox-content-top">
              
              <span class="setting-gpt-service-checkbox-content-icon">
                <img src={this.iconImage} alt=""/>
              </span>
              
              <span class="setting-gpt-service-checkbox-content-name">
                { this.value.name }
              </span>
              
            </div>
            <div class="setting-gpt-service-checkbox-content-bottom">
              { this.value.description }
            </div>
            <div class="setting-gpt-service-checkbox-content-bottom">
              { this.value.descriptionBottom }
            </div>
          </div>
        </SettingGPTViewCheckbox>
      </div>
    )
  }
});